import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: '',
    password: '',
    isAgree: false,
    city: 'bj',
    sex: '',
    hobby: [],
  }
  // 封装的公共函数
  // return的这个函数,才是表单元素的事件处理函数
  commonHandle = (name) => (e) => {
    // 获取事件目标的值
    const value =
      e.target.type === 'checkbox' ? e.target.checked : e.target.value.trim()
    // 修改
    this.setState({
      [name]: value,
    })
  }
  // const a = b => c => d => {

  // }

  /*
    const a = b =>  c => d => {

    }
  */

  hobbyHandle = (e) => {
    // 获取选中的复选框的值
    const value = e.target.value
    // 去状态里面找到hobby对应的数组,查看是否有这个值,有则删除,无则添加
    const index = this.state.hobby.indexOf(value)
    const newList = [...this.state.hobby]
    if (index === -1) {
      // 找不到,则添加
      newList.push(value)
    } else {
      // 找到了就删除
      newList.splice(index, 1)
    }
    this.setState({
      //  注意: 如果要修改的数据是复杂数据类型,不建议直接修改数据本身
      hobby: newList,
    })
  }

  render() {
    return (
      <div>
        用户名:
        {/* 受控组件: 一个表单元素,如果他的值被react的数据控制了,则这个表单元素就被称为受控组件 */}
        <input
          type="text"
          value={this.state.username}
          onChange={this.commonHandle('username')}
          name="username"
        />
        <br />
        密码:
        <input
          type="password"
          value={this.state.password}
          onChange={this.commonHandle('password')}
          name="password"
        />
        <br />
        {/* 只有一个复选框 */}
        是否同意规则:
        <input
          type="checkbox"
          checked={this.state.isAgree}
          onChange={this.commonHandle('isAgree')}
          name="isAgree"
        />
        <br />
        城市:
        {/*注意: 在react里面,通过select标签的value属性,来控制哪个option被选中 */}
        <select
          name="city"
          id=""
          value={this.state.city}
          onChange={this.commonHandle('city')}
        >
          <option value="sz">深圳</option>
          <option value="gz">广州</option>
          <option value="bj">北京</option>
        </select>
        {/* 不能受控的表单元素 */}
        <br />
        性别: <br />
        <input
          type="radio"
          name="sex"
          value="male"
          onChange={this.commonHandle('sex')}
        />
        男
        <input
          type="radio"
          name="sex"
          value="female"
          onChange={this.commonHandle('sex')}
        />
        女
        <br />
        爱好: <br />
        抽烟:
        <input type="checkbox" value="smoking" onChange={this.hobbyHandle} />
        看美女:
        <input type="checkbox" value="watchGirl" onChange={this.hobbyHandle} />
        找富婆:
        <input type="checkbox" value="findMoney" onChange={this.hobbyHandle} />
        <br />
        <button
          onClick={() => {
            console.log(this.state)
          }}
        >
          注册
        </button>
      </div>
    )
  }
}
